<!--用于用户选择prestashop的目录-->
<template>
  <div>
    <el-dialog
      v-loading.fullscreen.lock="categoryDialogLoading"
      :visible.sync="dialogVisible"
      title="选择默认目录"
      class="category-select"
      @close="close()"
    >
      <el-row>
        <h4>关联目录:</h4>
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" size="mini" clearable />
        <el-tree
          ref="exportProductTree"
          :data="catalogs"
          show-checkbox
          node-key="id"
          :default-expanded-keys="catalogs.length?[catalogs[0].id]:[]"
          :default-checked-keys="defaultCheckedKeys"
          :filter-node-method="filterCategoryNode"
          :expand-on-click-node="false"
          :props="{ children: 'children', label: 'name' }"
          check-strictly
          @check-change="()=>{this.target_catalogs=this.$refs.exportProductTree.getCheckedNodes()}"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ data.id + ' | ' + node.label }}</span>
            <span><el-button
              v-if="data.children.length"
              type="text"
              size="mini"
              style="margin-right: 20px"
              @click="showAddCategoryDialog(data)"
            >添加</el-button></span>
          </span>
        </el-tree>
        <el-button
          plain
          icon="el-icon-refresh"
          title="刷新"
          size="mini"
          @click="handleSyncCategory('catalog')"
        />
      </el-row>
      <el-row>
        <h4>默认目录:</h4>
        <el-select
          v-model="local_default_catalog"
          filterable
          class="mt-supplier-code-input"
          placeholder="请选择默认目录"
          @focus="handleDefaultCategoryFocus"
        >
          <el-option
            v-for="item in target_catalogs"
            :key="item.id"
            :label="item.id + ' |  ' + item.name"
            :value="item.id"
          />
        </el-select>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="handleConfrimChoose()">确 定</el-button>
      </span>

      <el-dialog
        v-loading.fullscreen.lock="addCategoryLoading"
        title="添加目录"
        :visible.sync="adddialogVisible"
        width="80%"
        append-to-body
        class="mt-add-category-dialog"
      >
        <el-form :model="addCategory" label-position="left" label-width="140px">
          <el-form-item label="* Name">
            <el-input v-model="addCategory.name" />
          </el-form-item>

          <el-form-item label="Displayed">
            <el-switch
              v-model="addCategory.active"
              active-color="#13ce66"
              active-value="1"
              inactive-value="0"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <br>
          <el-form-item label="描述">
            <tinymce ref="mtdescription" v-model="addCategory.description" :height="300" />
          </el-form-item>
          <el-form-item label="Meta title">
            <el-input v-model="addCategory.meta_title" />
          </el-form-item>

          <el-form-item label="Meta description">
            <el-input v-model="addCategory.meta_description" />
          </el-form-item>

          <el-form-item label="Meta keywords">
            <el-input v-model="addCategory.meta_keywords" />
          </el-form-item>

          <el-form-item label="* Friendly URL">
            <el-input v-model="addCategory.friendly_url" />
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="adddialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddCategory">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { CatalogTree as GetWebsiteCatalogs, AddCategory, Sync } from '@/api/erp/elicink/website'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'Choosecategory',
  components: { Tinymce },
  props: ['choosedialogVisible', 'website_id', 'default_catalog', 'defaultCheckedKeys'],
  data() {
    return {
      dialogVisible: false,
      local_default_catalog: '',
      categoryDialogLoading: false,
      filterText: '',
      categoryDialogTitle: '',
      catalogs: [],
      // default_catalog: null,
      target_catalogs: [],
      // defaultCheckedKeys: [],

      adddialogVisible: false,
      addCategoryLoading: false,
      addCategory: {
        name: '',
        active: '1',
        id_parent: null,
        description: '',
        meta_title: '',
        meta_description: '',
        meta_keywords: '',
        friendly_url: ''
      }
    }
  },
  watch: {
    choosedialogVisible(v) {
      this.dialogVisible = v
    },
    website_id(v) {
      this.website_id = v
      if (v) {
        this.handleFetchWebsiteCatalogs()
      }
    },
    default_catalog(v) {
      this.local_default_catalog = parseInt(v)
    }
  },
  methods: {
    handleSyncCategory(mode) {
      this.listLoading = true
      Sync(mode, this.website_id).then(response => {
        this.listLoading = false
        this.$message({
          type: 'success',
          message: '同步成功'
        })
        this.handleFetchWebsiteCatalogs()
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    handleFetchWebsiteCatalogs() {
      this.categoryDialogLoading = true
      GetWebsiteCatalogs(this.website_id).then(respone => {
        this.catalogs = respone.data
        this.categoryDialogLoading = false
      }).catch(e => {
        this.categoryDialogLoading = false
      })
    },
    handleDefaultCategoryFocus() {
      this.target_catalogs = this.$refs.exportProductTree.getCheckedNodes()
    },
    showAddCategoryDialog(data) {
      this.addCategory = {
        name: '',
        active: '1',
        id_parent: data.id,
        description: '',
        meta_title: '',
        meta_description: '',
        meta_keywords: '',
        friendly_url: ''
      }
      this.$nextTick(() => {
        this.$refs.mtdescription.destroyTinymce()
        this.$refs.mtdescription.initTinymce()
        this.$refs.mtdescription.setContent('')
      })
      this.adddialogVisible = true
    },
    handleAddCategory() {
      this.addCategoryLoading = true
      AddCategory(Object.assign(this.addCategory, { website_id: this.website_id }))
        .then(response => {
          this.addCategoryLoading = false
          this.adddialogVisible = false
          this.handleFetchWebsiteCatalogs()
        })
        .catch(e => {
          this.addCategoryLoading = false
        })
    },
    filterCategoryNode(value, data) {
      if (!value) return true
      return data.name.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1
    },
    notify(message, duration) {
      this.$notify({
        title: '提示',
        message: message,
        type: 'warning',
        duration: duration || 2000
      })
    },
    handleConfrimChoose() {
      if (this.local_default_catalog === '') {
        this.notify('请注意，您更没有选择默认目录')
      }
      const t = this.target_catalogs.map(m => {
        return m.id
      })
      if (t.indexOf(2) === -1) {
        this.notify('请注意，您没有选择HOME目录')
      }
      this.$emit('SetChoose', { target_catalogs: t, default_catalog: this.local_default_catalog })
      this.$emit('closeDialog', false)
    },
    close() {
      this.$emit('closeDialog', false)
    }
  }
  // created() {
  //   this.handleFetchWebsiteCatalogs()
  // }
}
</script>

<style scoped>

</style>
